<template>
  <div>
    <el-drawer :with-header="false" :visible.sync="isShowDrawer" direction="rtl" :before-close="close" size="75%"
      :append-to-body="true" destroy-on-close :modal-append-to-body="false">
      <div type="primary" class="drawer-close-btn" @click="close" style="height: 200px;">
        <img class="drawer-back" src="@/assets/images/drawer-back.png" alt="" /><span class="close-text">返回客户资金管理</span>
      </div>
      <div class="drawer-con-wrap">
        <h2 class="customer-name">{{ goodsTtile }}</h2>
      </div>
      <div class="mainBox">

        <div style="background-color: #ffffff;padding:20px">
          <div style="display: flex;">
            <div class="lable-item" style="margin-left: 0px;">
              <span class="lable-title">客户编码：</span>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
            <div class="lable-item">
              <span class="lable-title">客户名称：</span>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
            <div class="lable-item">
              <span class="lable-title">应收金额：</span>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
            <div class="lable-item">
              <span class="lable-title">回款金额：</span>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div style="display: flex;margin-top: 20px;">
            <div class="lable-item" style="margin-left: 0px;">
              <span class="lable-title">垫付金额：</span>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
            <div class="lable-item">
              <span class="lable-title">欠款金额：</span>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
          </div>

          <div class="collTile">白名单</div>

          <div class="commonTable">
            <el-table :data="userDataTable" border style="width: 100%">
              <el-table-column prop="date" label="订单编号">
              </el-table-column>
              <el-table-column prop="customerName" label="订单编号">
              </el-table-column>
              <el-table-column prop="address" label="客户名称">
              </el-table-column>
              <el-table-column prop="address" label="客户编码">
              </el-table-column>
              <el-table-column prop="address" label="订单类型">
              </el-table-column>
              <el-table-column prop="address" label="支付类型">
              </el-table-column>
              <el-table-column prop="address" label="金额小计">
              </el-table-column>
              <el-table-column prop="address" label="实付金额">
              </el-table-column>
              <el-table-column prop="address" label="欠款金额">
              </el-table-column>
              <el-table-column prop="address" label="交易时间">
              </el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" class="oButton red" @click="delFn(scope.row)">催款提醒</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  components: {},
  data () {
    return {
      isShowDrawer: false,
      goodsTtile: '客户资金管理',
      input: '',
      isLoading: false,
      isDictionaryDialogShow: false,
      userDataTable: [],
    };
  },
  mounted () {

  },
  methods: {
    show (rowData) {
      this.rowData = rowData;
      this.isShowDrawer = true;
    },
    close () {
      this.isShowDrawer = false;
    },
    handleClick (e) {
      console.log({ e });
    },
  },

};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/drawer-back.scss";
@import "@/assets/styles/pageStyle.scss";

.lable-item {
  display: flex;
  align-items: center;
  margin-left: 20px;

  .lable-title {
    width: 100px;
  }
}

.collTile {
  color: #172b4d;
  font-size: 18px;
  line-height: 48px;
  margin-top: 20px;
}

.customer-name {
  font-size: 22px;
  font-weight: 700;
  color: #172b4d;
}

.mainBox {
  padding: 0px 30px 30px 30px;
}

.el-button {
  // padding: 9px 19px !important;

  //控制字大小
  ::v-deep * {
    font-size: 14px;
    font-weight: 500px !important;
  }

  ::v-deep i {
    margin-right: 13px;
  }
}

.btn-blue {
  color: #204ec4;
  border: 1px solid #d7dbec;
  border-radius: 4px;

  span {
    font-weight: bolder;
  }
}



::v-deep .el-drawer__body {
  background: #f5f6fa;
  box-shadow: -6px 0px 17px 0px rgba(38, 44, 71, 0.15);
  border-radius: 4px 0px 0px 4px;
}

.drawer-con-wrap {
  .mt8-black-btn {
    padding: 0 !important;
  }

  .mt8 {
    margin-top: 20px;

    .createBtn {
      color: #164acd;
      border: 1px solid #dbdde2;
    }
  }

  padding: 0px 32px 0px;

  .drawer-header {
    .header-name {
      font-size: 14px;
      color: #6b778c;
    }

    .custom-header {
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-left {
        display: flex;
        align-items: center;

        .arrow-list {
          margin-left: 24px;
        }
      }
    }

    .link {
      .edit-link {
        font-size: 16px;
        margin-left: 8px;
      }
    }

    .custom-base {
      padding: 16px 0;
      background: #ffffff;
      box-shadow: 0px 1px 3px 0px rgba(21, 34, 50, 0.08);
      border-radius: 3px;
      display: flex;
      align-items: stretch;
      flex-direction: row;

      .custom-base-item {
        min-width: 20%;
        padding: 0 25px;

        .item-label {
          font-size: 14px;
          font-weight: 500;
          color: #7e84a3;
        }

        .item-value {
          font-size: 14px;
          font-weight: 400;
          margin-top: 5px;
          color: #131523;
        }
      }

      .custom-base-item:last-child {
        border-right: none;
      }
    }

    .info-block-wrap {
      display: flex;
      margin-top: 16px;
      align-items: stretch;
      flex-direction: row;
      justify-content: space-between;
      box-shadow: 0px 1px 4px 0px rgba(21, 34, 50, 0.08);
      border-radius: 4px;

      .info-left-wrap {
        padding: 10px 25px 25px 25px;
        overflow: hidden;
        background: #ffffff;
        margin-right: 30px;
        border-radius: 4px;
        width: 100%;
      }

      .info-right-wrap {
        height: auto;
        width: 315px;
        background: #ffffff;
        border-radius: 4px;
      }
    }
  }
}
</style>
